<template>
  <el-dialog
    v-model="showDialog"
    :width="600"
    custom-class="API-key-result-dialog"
    :title="$t('Base.createSuccess')"
    :z-index="2000"
  >
    <p class="result-tip">{{ $t('APIKey.resultTip') }}</p>
    <el-form ref="formCom" label-position="top" size="small">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="API Key">
            <el-row :gutter="12">
              <el-col :span="21">
                <el-input v-model="APIKeyData.api_key" disabled />
              </el-col>
              <el-col :span="3">
                <el-button ref="btnCopyAPIKey">{{ $t('Base.copy') }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Secret Key">
            <el-row :gutter="12">
              <el-col :span="21">
                <el-input v-model="APIKeyData.api_secret" disabled />
              </el-col>
              <el-col :span="3">
                <el-button ref="btnCopySecretKey">{{ $t('Base.copy') }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="showDialog = false">{{ $t('APIKey.close') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, defineProps, defineEmits, ref, Ref, watch, PropType, nextTick } from 'vue'
import { ElDialog } from 'element-plus'
import { createClipboardEleWithTargetText } from '@/common/tools'
import Clipboard from 'Clipboard'
import { APIKey } from '@/types/systemModule'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  data: {
    type: Object as PropType<APIKey>,
  },
})

const emit = defineEmits(['update:modelValue'])
const APIKeyData: Ref<APIKey> = ref({} as APIKey)

const btnCopyAPIKey = ref()
const btnCopySecretKey = ref()
let APIKeyClipboardInstance: undefined | Clipboard = undefined
let secretKeyClipboardInstance: undefined | Clipboard = undefined

const showDialog = computed({
  get: () => props.modelValue,
  set: (val: boolean) => {
    emit('update:modelValue', val)
  },
})

watch(showDialog, async (val) => {
  if (val && props.data) {
    APIKeyData.value = props.data
    await nextTick()
    initCopyTool()
  }
})

const initCopyTool = () => {
  APIKeyClipboardInstance && APIKeyClipboardInstance?.destroy()
  secretKeyClipboardInstance && secretKeyClipboardInstance?.destroy()
  APIKeyClipboardInstance = createClipboardEleWithTargetText(
    btnCopyAPIKey.value.$el,
    APIKeyData.value.api_key,
  )
  secretKeyClipboardInstance = createClipboardEleWithTargetText(
    btnCopySecretKey.value.$el,
    APIKeyData.value.api_secret,
  )
}
</script>

<style lang="scss">
.API-key-result-dialog {
  .result-tip {
    margin-top: 0;
    margin-bottom: 20px;
  }
  .el-col {
    .el-button {
      width: 100%;
    }
  }
  .el-input.is-disabled .el-input__inner,
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: var(--el-input-background-color, var(--el-color-white));
    border-color: var(--el-border-color-base);
    color: var(--el-input-font-color, var(--el-text-color-regular));
  }
}
</style>
